import React, { useCallback, useState } from "react";
import ReactDOM from "react-dom";

import { connect, useStore } from "react-redux";
import { bindActionCreators } from 'redux'
import userAction from '@/store/actions'
import $axios from '@/plugins/request'

import { Form, Input, Button, Checkbox, message, Card, Row, Col, Image } from 'antd';
import {
  UserOutlined,
  LockOutlined,
  VerifiedOutlined
} from '@ant-design/icons';


function Login(props) {

  const [captcha, setCaptcha] = useState("/api/users/captcha")

  const onFinish = useCallback(async (values) => {
    const { data } = await $axios.get("/api/users/captcha/" + values.captcha);
    if (data.code !== 1) return message.warning(data.msg);

    const res = await props.loginAsync(values);
    if (res.code !== 1) return message.warning(res.msg);
    message.success(res.msg);

    const searchParams = new URLSearchParams(props.location.search)
    const redirect = searchParams.get('redirect')
    props.history.replace(redirect ?? "/manage")
  }, [])

  const changeCaptcha = useCallback(() => {
    setCaptcha(captcha + "?")
  }, [captcha])

  const [rules] = useState({
    username: [{ required: true, message: '请输入用户名!', }],
    password: [{ required: true, message: '请输入密码!', }],
    captcha: [{ required: true, message: '请输入验证码!', }]
  }, [])

  return (
    <div style={{ paddingTop: "20vh" }}>
      <Card title="登录" style={{ width: 500, margin: '0 auto', border: "1px solid #ccc" }}>
        <Form
          name="loginForm"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          onSubmit={onFinish}
        >
          <Form.Item label="用户名" name="username" rules={rules.username}>
            <Input prefix={<UserOutlined className="site-form-item-icon" />} autoComplete="off" />
          </Form.Item>
          <Form.Item label="密码" name="password" rules={rules.password}>
            <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} autoComplete="off" />
          </Form.Item>
          <Form.Item label="验证码">
            <Row gutter={8}>
              <Col span={16}>
                <Form.Item
                  label=""
                  name="captcha"
                  noStyle
                  rules={rules.captcha}
                >
                  <Input prefix={<VerifiedOutlined className="site-form-item-icon" />} autoComplete="off" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Image
                  width={120}
                  height={32}
                  preview={false}
                  src={captcha}
                  onClick={changeCaptcha}
                  style={{ cursor: "pointer" }}
                  fallback=""
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 4, span: 20 }}>
            <Checkbox>记住我</Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
            <Button type="primary" htmlType="submit">登录</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default connect(
  state => ({}),
  dispatch => bindActionCreators(userAction, dispatch)
)(Login)